<template>
	<div class="netteach">
		<div class="netteach-nav">
			<div class="netteach-nav-type">
				<span>类型：</span>
				<div>
					<el-radio-group v-model="typeval" @change="getNetteach">
						<el-radio :label="0"> 所有</el-radio>
						<el-radio :label="1">我发起的</el-radio>
						<el-radio :label="2">邀请我的</el-radio>
						<el-radio :label="3">我未参与的</el-radio>
					</el-radio-group>
				</div>
			</div>

			<div class="netteach-nav-type">
				<span>状态：</span>
				<div>
					<el-radio-group v-model="statusval" @change="getNetteach">
						<el-radio :label="0">所有</el-radio>
						<el-radio :label="1">未开始</el-radio>
						<el-radio :label="2">进行中</el-radio>
						<el-radio :label="3">已结束</el-radio>
					</el-radio-group>
				</div>
			</div>
		</div>

		<div class="netteach-content">
			
			<div class="netteach-screen">
				<!-- <span>发起时间 <i class="el-icon-sort-down"></i></span>
				<span>结束时间 <i class="el-icon-sort-down"></i></span>
				<span>得分 <i class="el-icon-sort-down"></i></span> -->

				<el-radio-group v-model="screenval" @change="getNetteach">
					<el-radio label="create_time">发起时间 <i class="el-icon-sort-down"></i></el-radio>
					<el-radio label="end_time">结束时间 <i class="el-icon-sort-down"></i></el-radio>
					<el-radio label="score">得分  <i class="el-icon-sort-down"></i></el-radio>
				</el-radio-group>
			</div>

			<ul class="netteach-list index-lists"  v-loading="loading"  element-loading-text="拼命加载中">

                <!-- 多级版 -->
                <template v-if="$store.getters.isMulti">
                    <li class="list-item" v-for="(item, index) of netteachList" :key="index">
                        <div class="netteach-list-title">
                            <p @click="getStatus"  v-if="item._status === '未开始'">{{item.name}}</p>
                            <router-link  v-else  :to="{path: '/netteach/details', query: {id: item.id}}">{{item.name}}</router-link>
                            <div class="netteach-list-status">
                                <i v-if="item.is_ping === 0" class="ipng weiping"></i>
                                <i v-else class="ipng yiping"></i>
                                <span>{{item.start_time}}-{{item.end_time}}</span>
                            </div>
                            <i v-if="item._status === '未开始' " class="ipng  weikaishi"></i>
                            <i v-else-if="item._status === '进行中' " class="ipng  jinxingzhong "></i>
                            <i v-else class="ipng  yijiesu"></i>
                        </div>

                        <div class="netteach-list-content" v-html="item.profile"></div>

                        <div class="netteach-list-info">
                            <div class="netteach-list-resource">
                                <span>
                                    <i class="ipng cousevideo"></i>
                                    <strong>视频文件：{{item.video_num}}</strong>
                                </span>
                                <span>
                                    <i class="ipng cousepeople"></i>
                                    <strong>参与人数：{{item.comment_count}}/{{item.total_user}}</strong>
                                </span>
                            </div>

                            <div class="netteach-list-initiator">
                                <span :title="item.user_name">发起者：{{item.user_name}}</span>
                                <span :title="item.org_name">{{item.org_name}}</span>
                                <i @click="deleteData(item.id)" title="shanc" class="el-icon-delete" v-if="item.create_id == $g.user_id"></i>
                            </div>
                        </div>
                    </li>
                </template>

                <!-- 单级版 -->
                <template v-else>
                    <li class="netteach-list-li" v-for="(item, index) of netteachList" :key="index">
                        <div class="netteach-list-title">
                            <p @click="getStatus"  v-if="item._status === '未开始'">{{item.name}}</p>
                            <router-link  v-else  :to="{path: '/netteach/details', query: {id: item.id}}">{{item.name}}</router-link>
                            <div class="netteach-list-status">
                                <i v-if="item.is_ping === 0" class="ipng weiping"></i>
                                <i v-else class="ipng yiping"></i>
                                <span>{{item.start_time}}-{{item.end_time}}</span>
                            </div>
                            <i v-if="item._status === '未开始' " class="ipng  weikaishi"></i>
                            <i v-else-if="item._status === '进行中' " class="ipng  jinxingzhong "></i>
                            <i v-else class="ipng  yijiesu"></i>
                        </div>

                        <div class="netteach-list-content" v-html="item.profile"></div>

                        <div class="netteach-list-info">
                            <div class="netteach-list-resource">
                                <span>
                                    <i class="ipng cousevideo"></i>
                                    <strong>视频文件：{{item.video_num}}</strong>
                                </span>
                                <span>
                                    <i class="ipng cousepeople"></i>
                                    <strong>参与人数：{{item.comment_count}}/{{item.total_user}}</strong>
                                </span>
                            </div>

                            <div class="netteach-list-initiator">
                                <span :title="item.user_name">发起者：{{item.user_name}}</span>
                                <span :title="item.org_name">{{item.org_name}}</span>
                                <i @click="deleteData(item.id)" title="shanc" class="el-icon-delete" v-if="item.create_id == $g.user_id"></i>
                            </div>
                        </div>
                    </li>
                </template>
			</ul>

			<el-pagination v-if="totalSum > pageSize" 
			     @size-change="sizeChange"
			     @current-change="currentChange"
			     :current-page="pageIndex"
			     :page-sizes="[10, 50, 100, 200, 300, 400]"
			     :page-size="pageSize"
			     layout="total, sizes, prev, pager, next, jumper"
			     :total="totalSum">
			</el-pagination>

			<div class="dependent" v-if="placeholder">
				<i class="ipng image_state01"></i>
				<p>还没发现任何相关的内容哦~</p>
			</div>
		</div>
	</div>
</template>

<script>
	
	export default{
		data(){
			return {
				typeval: 0,
				statusval: 0,
				screenval: 'create_time',
				netteachList: [],
				pageIndex: 1,
				pageSize: 12,
				totalSum: 0,
				loading: true,
				placeholder: true
			}
		},
		created(){
			this.getNetteach()
		},
		methods: {
			deleteData(id){
				this.$confirm('是否要删除？', '删除', {
					cancelButtonText: '取消',
					confirmButtonText: '确定',
					type: 'warning',
					customClass: "test-message"
				}).then(() => {

					let success = (res=>{
						this.$message.error(res.msg)
						this.getNetteach()
					})
					let params = {id: id}
					this.$ajax.delete('api/network/eva_list', { params , func: {success: success}})
					// this.$ajax.post('api/newtest/question', params, {func: {success: success}})

				}).catch(() => {});
			},
			getStatus(){
				return this.$message.error('还未开始,请稍等')
			},
			/*
				获取数据列表
			 */
			getNetteach(){
				let success = (res =>{
					this.loading = false;
					this.netteachList = res.data.data;
					this.pageIndex = parseInt(res.data.page_index);
					this.totalSum = parseInt(res.data.data_sum);
					this.placeholder = this.netteachList.length === 0 ? true : false;
				});
				this.$ajax({
					url: 'api/network/eva_list',
					method: 'get',
					params: {
						page_index: this.pageIndex,
						page_size: this.pageSize,
						eva_type: this.typeval,
						eva_status: this.statusval,
						order: this.screenval,
						userid: this.$g.user_id

					},
					func: {success: success}
				})
			},
			sizeChange(val) {
				this.pageSize = val
				this.getNetteach();
			},
			currentChange(val) {
				document.documentElement.scrollTop = 0;
				this.pageIndex = val;
				this.getNetteach();
			}

		}
	}
</script>
<style lang="scss" scoped>
    .netteach-list-content{
        word-break: break-all;
    }
</style>